<template>
	<view class="con">
		<view class="addrbox flex" @click="checkaddr">
			<view class="addrbox_left flex">
				<image class="addr_icon" src="./static/dingwei.png" mode=""></image>
				<view class="right" v-if='!addr'>
					添加收货地址
				</view>
				<view class="left_right" v-else>
					<view class="addr_name">
						{{addr.detail}}
					</view>
					<view class="contacts">
						{{addr.username}} <text style="color: #7F7F7F;margin-left: 16rpx;">{{addr.mobile}}</text>
					</view>
				</view>
			</view>
			<image class="right_icon" src="./static/more1.png" mode=""></image>
		</view>
		<view class="infobox">
			<!-- <view class="dianp flex" @click="clickto('/pages/product/smart')">
				<image class="dpicon" src="./static/smart.png" mode=""></image>
				{{stroeName||''}}
				<image class="dpright" src="./static/more3.png" mode=""></image>
			</view> -->
			<view class="proinfo flex">
				<image class="propic" :src="proinfo.img" mode="aspectFill"></image>
				<view class="inforight">
					<view class="proname">
						{{proinfo.name}}
					</view>
					<!-- <view class="ggbox">
						{{ggobj.text}}
						<image class="ggright" src="./static/more2.png" mode=""></image>
					</view> -->
					<!-- <view class="infolb flex">
						<view class="price flex">
							<text v-if="title=='确认订单'" style="font-size: 28rpx;color: #FF4E31;font-weight: bold;">￥</text>
							<text style="font-size: 36rpx;color: #FF4E31;font-weight: bold;">{{ggobj.price}}</text>
							<text v-if="title=='兑换确认订单'" style="font-size: 24rpx;color: #FF4E31;">积分</text>
						</view>
						<u-number-box :min="1" :max="100" value="num">
							<view slot="minus" class="minus" @click="minus">
								<image class="jian" src="./static/jian.png" mode=""></image>
							</view>
							<text slot="input" style="width: 74rpx;text-align: center;font-size: 29rpx;color: #333;"
								class="input">{{num}}</text>
							<view slot="plus" class="plus" @click="plus">
								<image class="jia" src="./static/jia.png" mode=""></image>
							</view>
						</u-number-box>
					</view> -->
				</view>
			</view>
		</view>
		<view class="paytype">
			<view class="pay_item flex" v-for="(item,index) in typelist" :key="index" @click="curtype=index">
				<view class="pay_name flex">
					<image class="pay_icon" :src="item.icon" mode=""></image>
					{{item.name}}
				</view>
				<view class="checkbaox">
					<image v-if="curtype==index" class="check_icon" src="./static/check.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="flex">
				<!-- <view class="allnum">
					共{{num}}件
				</view> -->
				<view class="allprice flex">
					合计：
					<text style="font-size: 30rpx;color: #FF4E31;font-weight: bold;">￥</text><text
						style="font-size: 42rpx;color: #FF4E31;font-weight: bold;">{{price}}</text>
						
				</view>
			</view>
			<view class="btn" @click="submit">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ourAddress
	} from '@/api/my.js'
	import {
		getAuctionGoodDetail
	} from '@/api/product.js'
	import {
		product
	} from '@/api/home.js'
	export default {
		data() {
			return {
				title:'',
				num: 1,
				typelist: [{
						type: 1,
						icon: require('./static/wx.png'),
						name: '微信支付'
					},
					{
						type: 2,
						icon: require('./static/qiandai.png'),
						name: '余额支付'
					},
				],
				curtype: 0,
				id: '',
				proinfo: {},
				gglist: [],
				ggobj: {},
				ggid: '',
				addr: null,
				type: '',
				stroeName:'',
				user_id:'',
				price:0
			};
		},
		methods: {
			clickto(url){
				uni.$u.route(url, {
					id: this.id,
					num: this.num,
					ggid: this.ggid,
					type: this.type,
					user_id: this.user_id
				})
			},
			submit() {
				if (!this.addr) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				product({
					p_id: this.id,
					num: this.num,
					spec_id: this.ggid,
					method: this.typelist[this.curtype].type,
					address_id: this.addr.id
				}).then(res => {
					if (res.data.code == 1) {
						if(this.typelist[this.curtype].type==1){//微信
							console.log(res)
							let data = res.data.data.pay
							let appId = data.appId;
							let timeStamp = data.timeStamp;
							let nonceStr = data.nonceStr;
							let packageX = data.package;
							let signType = 'MD5';
							let paySign = data.paySign;
							uni.requestPayment({
								provider: 'wxpay',
								appId: appId, //小程序Appid
								timeStamp: timeStamp, //创建订单时间戳
								nonceStr: nonceStr,
								package: packageX, // 订单包
								signType: signType, // 加密方式统一'MD5'
								paySign: paySign, // 后台支付签名返回
								success: function(res) {
									uni.showToast({
										title: "支付成功",
										icon:'none'
									})
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pages/order/myorder?status=1'
										})
									},1000)
								},
								fail: function(err) {
									uni.showToast({
										title: "支付失败",
										icon:'none'
									})
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pages/order/myorder?status=0&from="mine"'
										})
									},100)
								}
							});
						}else{//余额
							uni.showToast({
								title: res.data.data.pay.message,
								icon:'none'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/order/myorder?status=1'
								})
							},1000)
						}
						// console.log(res.data)
						
					} else {
						uni.showToast({
							title: res.data.msg,
							icon:'none'
						})
					}

				})
			},
			checkaddr() {
				// 判断有无地址
				if (this.addr) { //有地址
					uni.$u.route('/pages/addr/checkaddr');
				} else {
					// /pages/addr/aeaddr
					uni.$u.route('/pages/addr/aeaddr');
				}

			},
			minus() { //减数量
				if (this.num > 1) {
					this.num--
				}
			},
			plus() { //加数量
				this.num++
			},
			getProdetail() {
				getAuctionGoodDetail({
					id: this.id
				}).then(res => {
					this.proinfo = res.data.data.list
					this.proinfo.img = this.$BASE_URL + this.proinfo.images.split(',')[0]
				})
			},
			async getaddr() {
				if (uni.getStorageSync('curaddr')) {
					this.addr = uni.getStorageSync('curaddr')
					return
				}
				let res = await ourAddress()
				let addrlist = res.data.data.data
				// console.log(addrlist)
				addrlist.map(t => {
					if (t.is_default) {
						this.addr = t
					}
				})
				// console.log(this.addr)
			}
		},
		onLoad(option) {
			this.id = option.id
			this.price=option.price
			this.getProdetail()
		},
		onShow() {
			this.getaddr()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F7F9;
	}

	.con {
		padding: 22rpx 28rpx;
	}

	.addrbox {
		background-color: #fff;
		padding: 31rpx 25rpx;
		justify-content: space-between;

		border-radius: 26rpx;

		.addrbox_left {

			.addr_icon {
				width: 36rpx;
				height: 41rpx;
				margin-right: 14rpx;
			}

			.left_right {

				.addr_name {
					color: #232323;
					font-size: 32rpx;
					font-weight: bold;
				}

				.contacts {
					margin-top: 4rpx;
					color: #707070;
					font-size: 26rpx;
				}
			}

		}

		.right_icon {
			width: 15rpx;
			height: 24rpx;
		}
	}

	.infobox {
		padding: 36rpx 52rpx 39rpx 22rpx;
		border-radius: 26rpx;
		background-color: #fff;
		margin-top: 25rpx;

		.dianp {
			font-size: 24rpx;
			color: #616161;

			.dpicon {
				width: 28rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}

			.dpright {
				width: 12rpx;
				height: 20rpx;
				margin-left: 8rpx;
			}
		}
	}

	.proinfo {
		margin-top: 38rpx;

		.propic {
			width: 196rpx;
			height: 196rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.inforight {
			height: 196rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.proname {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
			}

			.ggbox {
				padding: 0 17rpx;
				line-height: 55rpx;
				background: #F7F6F6;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #9C9C9C;
				font-size: 24rpx;

				.ggright {
					width: 15rpx;
					height: 21rpx;
				}
			}

			.infolb {
				justify-content: space-between;
			}
		}
	}

	.paytype {
		padding: 0 25rpx;
		border-radius: 26rpx;
		background-color: #fff;
		margin-top: 25rpx;

		.pay_item {
			padding: 30rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			justify-content: space-between;
			line-height: 42rpx;

			.pay_icon {
				width: 42rpx;
				height: 42rpx;
				margin-right: 14rpx;
			}

			.checkbaox {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #CBCBCB;
				border-radius: 50%;
				position: relative;

				.check_icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: -1rpx;
					top: -1rpx;
				}
			}
		}
	}

	.footer {
		width: calc(750rpx - 62rpx);
		position: fixed;
		bottom: 0;
		left: 0;
		height: 114rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 26rpx 20rpx 36rpx;
		justify-content: space-between;

		.allnum {
			color: #979797;
			font-size: 25.01rpx;
			line-height: 114rpx;
			margin-right: 28rpx;
		}

		.allprice {
			color: #333333;
			line-height: 114rpx;
			font-size: 29rpx;
		}

		.btn {
			width: 234rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FF8717, #FF5F00);
			border-radius: 40rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.u-number-box {
		border-radius: 10rpx;

		border: 1rpx solid #DFDFDF;
	}

	.minus {
		width: 51rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #DFDFDF;

		.jian {
			width: 14rpx;
			height: 2rpx;
		}
	}

	.plus {
		width: 51rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1rpx solid #DFDFDF;

		.jia {
			width: 16rpx;
			height: 16rpx;
		}
	}
</style>
